<template>
    <div class="comp" ref="broken"> <!-- 放置图表的位置 --></div>
</template>

<script  setup>
// 1.引入基础模块（echarts api）
import { inject, ref, onMounted, onBeforeUnmount } from "vue"
const echarts = inject('echarts')
const api = inject('api')

// 2.初始化页面数据
let broken = ref(null)//初始化图表容器ref值
let echartsInstance = null//初始化echarts实例对象
let allData = []//初始化业务数据

// 3.获取echarts绘图实例 设置基础配置项 完成基础图表绘制
function initEcharts() {
    // 3.1获取实例
    echartsInstance = echarts.init(broken.value, 'dark')
    // 3.2设置基础配置项
    let initOptions = {
        title: {
            text: "▍农业种植生长趋势",
            top: "3%",
            left: "3%"
        },
        legend: {
            icon: "circle",
            top: "12%",
            left: "3%"
        },
        grid: {
            show: false,
            top: "20%",
            left: "3%",
            right: "3%",
            bottom: "3%",
            containLabel: true
        },
        tooltip: {},
        xAxis: {
            type: "category"
        },
        yAxis: {
            type: "value"
        }
    }
    // 3.3完成基础图表绘制
    echartsInstance.setOption(initOptions)
}

// 4.获农业种植面积数据
async function getData() {
    let { data } = await api('CropGrowthTrend')
    allData = data
    console.log(allData)
    editEcharts()
}

// 5.根据业务继续完善绘图配置项 完善图表
function editEcharts() {
    // 5.1组装系列数据[{type,data},{}]
    let seriesData = allData.map(item => {
        // 组装每个系列上的data数据 [200,180,300.......]
        let datas = item.content.map(m => m.area)
        return {
            name: item.city,
            type: "line",
            data: datas,
            stack: true,//设置堆叠效果
            smooth: true,//设置圆滑的曲线
            // areaStyle: {}//堆叠填色
        }
    })

    // 5.2设置绘图配置项
    let editOptions = {
        xAxis: {
            data: allData[0].content.map(item => item.month)
        },
        series: seriesData
    }
    // 5.3使用配置项完善图表 合拼新旧配置项
    echartsInstance.setOption(editOptions)
}

// 6.图表适配方法 坐标系内的  坐标系外的（自己处理）
function Adaptation() {
    // ------------------手动处理适配-------------------
    // 获取自定义比例尺  获取当前图表容器的宽度/100*3.5-3.7(3.6)
    let width = broken.value.offsetWidth
    let scale = width / 100 * 3.6

    // 6.1设置基础配置项
    let initOptions = {
        title: {
            textStyle: {
                fontSize: scale
            }
        },
        legend: {
            itemGap: scale / 2,
            itemHeight: scale / 2,
            itemWidth: scale / 2
        },
    }
    // 6.2完成基础图表绘制
    echartsInstance.setOption(initOptions)
    // -----------------坐标系内适配----------------------
    // 6.3
    echartsInstance.resize()
}


// 组件挂载完毕执行业务逻辑
onMounted(() => {
    initEcharts()
    getData()
    window.addEventListener('resize', Adaptation)//开启窗口变化监听
    Adaptation()
})

// 组件销毁移除  防止内存泄露  
onBeforeUnmount(() => {
    window.removeEventListener('resize', Adaptation)
})
defineExpose({
    Adaptation
})

</script>

<style scoped></style>